import React from 'react';
import PropTypes from 'prop-types';
import H3CImg from '../../images/h3c.svg';
import HuaweiImg from '../../images/huawei.png';
import CiscoImg from '../../images/cisco.png';
import StatusImg from '../../images/status.svg';
import RefreshImg from '../../images/refresh.svg';
import StatusStopImg from '../../images/status-stop.svg';
import { Avatar, Popover, Switch, Popconfirm } from 'antd';

import _ from 'lodash';
import './index.less';

const prefixCls = 'switch-card';
const intervalUnitMap = {
  minute: '分钟',
  hour: '小时',
  day: '天'
};

const manufacturerImgMap = {
  h3c: H3CImg,
  huawei: HuaweiImg,
  cisco: CiscoImg
};

const SwtichCard = props => {
  const { data, onEdit, onDelete, onStatus, statusLoading } = props;

  const name = _.get(data, 'name', '');
  const ip = _.get(data, 'ip', '');
  const username = _.get(data, 'username', '');
  const intervalValue = _.get(data, 'interval.value', 30);
  const manufacturer = _.get(data, 'manufacturer');
  const intervalUnit = _.get(data, 'interval.unit', 'minute');
  const created = _.get(data, 'created', '');
  const updated = _.get(data, 'updated', '');
  const reachable = _.get(data, 'reachable');
  const status = _.get(data, 'status', false);

  return (
    <div className={prefixCls}>
      <div className={!status && 'unactive'}>
        <div className={`${prefixCls}-title`}>
          <div className={`${prefixCls}-switch-icon`}>
            <Avatar size={48} src={manufacturerImgMap[manufacturer]} />
          </div>
          <div>
            <h4 className={`${prefixCls}-switch-name`}>
              <Popover content={name} overlayStyle={{ maxWidth: 200, wordBreak: 'break-all' }}>
                {name}
              </Popover>
            </h4>
            <span>IP:{ip}</span>
          </div>
          {status && reachable ? (
            <div className={`${prefixCls}-switch-status`}>
              <Popover content={'正常连接'}>
                <Avatar src={StatusImg} />
              </Popover>
            </div>
          ) : (
            <div>
              <Avatar src={StatusStopImg} />
            </div>
          )}
        </div>
        <div className={`${prefixCls}-content`}>
          <div className={`${prefixCls}-content-item`}>
            <h4>管理员账号：</h4>
            <span>{username}</span>
          </div>
          <div className={`${prefixCls}-content-item`}>
            <h4>获取周期：</h4>
            <span>
              {intervalValue}
              {intervalUnitMap[intervalUnit]}/次
            </span>
          </div>
          <div>
            <img src={RefreshImg} style={{ width: 15, margin: '-4px 4px 0 0' }} />
            <span>最近更新：{updated || created}</span>
          </div>
        </div>
        <div className={`${prefixCls}-footer`}>
          <div className={`${prefixCls}-footer-operate`}>
            <span onClick={onEdit}>编辑</span>
            <Popconfirm title={'确定删除吗'} onConfirm={onDelete} okText="确定" cancelText="取消">
              <span>删除</span>
            </Popconfirm>
          </div>
          <div>
            <Switch checked={status} onChange={onStatus} loading={statusLoading} />
          </div>
        </div>
      </div>
    </div>
  );
};

SwtichCard.propTypes = {
  onEdit: PropTypes.func,
  data: PropTypes.object,
  onDelete: PropTypes.func,
  onStatus: PropTypes.func,
  statusLoading: PropTypes.bool
};

export default SwtichCard;
